//在common.js中已经定义全局变量ctx
// function getContextPath() {
//     var pathName = document.location.pathname;
//     var index = pathName.substr(1).indexOf("/");
//     var result = pathName.substr(0,index+1);
//     return result;
// }
// var ctx = getContextPath();
//以下代码未实现【验证码的校验】逻辑

let loginForm = document.getElementById("loginForm");
let username = document.getElementById("username");
let password = document.getElementById("password");
let password2 = document.getElementById("password2");
let verify = document.getElementById("verify");
let registerBtn = document.getElementById("registerBtn");

let usernameReg = /^[0-9A-Za-z]{4,20}$/;   // 4- 20位数字与字母组合
let passwordReg = /^.{6,16}$/;   //6-16位数字与字母组合

function checkUsername() {
    return usernameReg.test(username.value)
}

//检查密码是否满足正则
function checkPasswordReg() {
    return passwordReg.test(password.value)
}

//检查两次输入密码是否一致
function checkPasswordSame() {
    if (password.value === password2.value && password2.value != "") {
        return true;
    } else {
        return false;
    }
}

//username判断逻辑（绑定blur和focus）
username.addEventListener("blur", function () {
    axios({
        method: "get",
        params: {
            method: "checkUsername",
            username: username.value
        },
        url: ctx + "/user"
    }).then(function (resp) {
        // console.log(resp.data);
        // console.log(resp.data.result);
        if (resp.data.result == "USERNAME_CAN_USE") {
            //后端验证成功，前端进一步正则表达式验证
            if (checkUsername()) {
                username.setAttribute("checkStatus", 1);
                verifyImageTip(username.nextElementSibling, imgSuccess);
                verifyResultTip(username.parentElement.nextElementSibling, "");
            } else {
                //正则验证失败
                username.setAttribute("checkStatus", 0);
                verifyImageTip(username.nextElementSibling, imgFail);
                verifyResultTip(username.parentElement.nextElementSibling, "用户名不符合规则（用户名由4-20位数字、字母组成）");
            }
        } else {
            //验证失败
            username.setAttribute("checkStatus", 0);
            verifyImageTip(username.nextElementSibling, imgFail);
            verifyResultTip(username.parentElement.nextElementSibling, "用户名已经被占用!");
            return false;
        }
    })
});
username.addEventListener("focus", function () {
    verifyResultTip(username.parentElement.nextElementSibling, "");
    verifyImageTip(username.nextElementSibling, imgBlank);    //清空图片
});


//password判断逻辑（绑定blur和focus）
password.addEventListener("blur", function () {

    if (checkPasswordReg()) {
        //正则验证通过
        verifyImageTip(password.nextElementSibling, imgSuccess);
        verifyResultTip(password.parentElement.nextElementSibling, "");
    } else {
        //正则验证失败
        verifyImageTip(password.nextElementSibling, imgFail);
        verifyResultTip(password.parentElement.nextElementSibling, "密码不符合规则（长度6-16位）");
    }

});
password.addEventListener("focus", function () {
    verifyResultTip(password.parentElement.nextElementSibling, "");
    verifyImageTip(password.nextElementSibling, imgBlank);    //清空图片
});


//password2判断逻辑（绑定blur和focus）
password2.addEventListener("blur", function () {
    if (checkPasswordSame()) {
        //正则验证通过
        password.setAttribute("checkStatus", 1);
        verifyImageTip(password2.nextElementSibling, imgSuccess);
        verifyResultTip(password2.parentElement.nextElementSibling, "");
    } else {
        //正则验证失败
        password.setAttribute("checkStatus", 0);
        verifyImageTip(password2.nextElementSibling, imgFail);
        verifyResultTip(password2.parentElement.nextElementSibling, "两次输入密码不一致");
    }
});
password2.addEventListener("focus", function () {
    verifyResultTip(password2.parentElement.nextElementSibling, "");
    verifyImageTip(password2.nextElementSibling, imgBlank);    //清空图片
});

//注册按钮的单击事件（表单提交）
registerBtn.addEventListener("click", function () {
    username.blur();
    password.blur();
    verify.blur();
    let usernameCheckStatus = username.getAttribute("checkStatus");
    let passwordCheckStatus = password.getAttribute("checkStatus");
    //=1 表示验证通过
    let verifyCheckStatus = verify.getAttribute("checkstatus");
    if (usernameCheckStatus != 1) {
        alert("请检查用户名");
        return false;
    } else if (passwordCheckStatus != 1) {
        alert("请检查密码");
        return false;
    } else if (verifyCheckStatus !=1){
        alert("请输入正确的验证码");
        return false;
    } else {
        // loginForm.submit();
        axios({
            method: "post",
            params: {
                method: "registerUser",
                username: username.value,
                password: password.value
            },
            url: ctx + "/user"
        }).then(function (resp) {
            console.log(resp.data.result)
            if (resp.data.result === "REGISTER_SUCCESS") {
                alert("注册成功!正在跳转到登录页");
                setTimeout(() => {
                    location.href = ctx + "/login.jsp"
                }, 2000);
            } else {
                alert("注册失败!");
            }
        });
    }

});




// verify判断逻辑（绑定blur和focus）
// input事件是用户输入时动态触发，change是失去焦点时静态触发
verify.addEventListener("input",function () {
    // 获取输入的验证码
    let verifyInputByUser = verify.value;
    let len = verifyInputByUser.length;
    if(len===4){
        //输入4位就发送请求进行验证
        axios({ method:"get", params:{ method: "checkCode", verify: verify.value },url:ctx+"/verifyCode" }).then(function (resp) {
            console.log(resp.data);
            if(resp.data.result === "VERIFY_PASS"){
                //验证通过
                verify.setAttribute("checkStatus",1);
                verifyImageTip(verify.nextElementSibling,imgSuccess); }else{
                //验证失败
                verify.setAttribute("checkStatus",0);
                verifyImageTip(verify.nextElementSibling,imgFail); } }) }else{
        //验证失败
        verify.setAttribute("checkStatus",0);
        verifyImageTip(verify.nextElementSibling,imgBlank);
        //清空图片
    } });



